<template>
  <div class="warning-notice-container">
    <!-- 搜索框区域 -->
    <div class="search-wrap">
      <div class="search-input-box">
        <form action="/">
          <van-search
            v-model="searchOptions.searchKey"
            show-action
            shape="round"
            placeholder="搜索设备编号/故障名称/故障代码"
            @search="searchOptions.handleSearch"
            @clear="searchOptions.handleClear"
          >
            <template #action>
              <div
                class="filter-box"
                @click="searchOptions.handleFilter"
              >
                <i class="iconfont iconshaixuan"></i>
                <span>筛选</span>
              </div>
            </template>
          </van-search>
        </form>
      </div>
    </div>

    <!-- 内容列表区域 -->
    <div
      class="content-list-wrap"
      v-if="alarmNoticeList.length"
    >
      <div
        v-for="(item,index) in alarmNoticeList"
        :key="index"
        class="content-item-box"
        @click="jumpDetail(item)"
      >
        <!-- 左侧 -->
        <div class="item-left-box">
          <div
            class="icon-box icon-box6"
            v-if="item.status === 6"
          >
            <i class="iconfont iconzaixian"></i>
          </div>
          <div
            class="icon-box"
            v-else
          >
            <i class="iconfont iconyubaojing"></i>
          </div>
        </div>
        <!-- 线 -->
        <div class="line-box"></div>
        <!-- 右侧 -->
        <div class="item-right-box">
          <div class="project-name">
            <div class="work-order">设备编号：{{ item.device_number }}</div>
            <div class="status-box">
              <div
                class="icon-box-status1"
                v-if="item.status === 1"
              >
                <i class="iconfont icondaiqueren"></i>
              </div>
              <div
                class="icon-box-status2"
                v-if="item.status === 2"
              >
                <i class="iconfont icondaichuli"></i>
              </div>
              <div
                class="icon-box-status3"
                v-if="item.status === 3"
              >
                <i class="iconfont iconchulizhong"></i>
              </div>
              <div
                class="icon-box-status5"
                v-if="item.status === 5"
              >
                <i class="iconfont icontianjiawancheng"></i>
              </div>
              <span :class="{'span-status6': item.status === 6}">{{ item.status | handleStatus(item.status) }}</span>
            </div>
          </div>
          <div class="middle-box">
            <div class="fault-name">
              <span>故障名称</span>
              <span class="fault-val">{{ item.error_name }}</span>
            </div>
            <div class="fault-name">
              <span>故障代码</span>
              <span class="fault-val">{{ item.error_code }}</span>
            </div>
          </div>
          <div class="company-name">
            <div class="warning-grade">{{ item.grade | handleLevel(item.grade) }}</div>
            <div class="">{{ item.time }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 无数据 -->
    <div
      class="no-data-box"
      v-if="noDataState"
    >暂无数据</div>

    <WarnFilter
      v-show="showWarnFilter"
      :projectId="projectId"
      @submit="submitFilter"
    ></WarnFilter>
  </div>
</template>

<script>
import { Search } from 'vant';
import WarnFilter from '../components/WarnFilter.vue';
import { getProjectDetail, getProductLineList, getAlarmNoticeList, getAlarmNoticeDetail } from '@/api/projectManage';

export default {
  name: 'WarningNotice',
  props: {
    projectId: Number // 项目id
  },
  components: {
    [Search.name]: Search,
    WarnFilter
  },
  data() {
    return {
      // 搜索相关配置
      searchOptions: {
        searchKey: '',
        handleSearch: this.getAlarmNoticeListEvent,
        handleClear: this.getAlarmNoticeListEvent,
        handleFilter: this.handleFilter
      },

      showWarnFilter: false, // 控制筛选封装组件显示与隐藏
      projectDetail: {}, // 项目详情
      proLineList: [], // 产线列表
      proLineIds: '', // 产线id - 字符串形式
      alarmNoticeList: [], // 报警记录

      policeType: '', // 报警类型
      policeLevel: '', // 报警等级
      policeStatus: '', // 处理进度
      startTime: '',
      endTiem: '',
      noDataState: false
    };
  },
  created() {
    this.getProjectDetailEvent();
  },
  methods: {
    // 获取项目详情
    getProjectDetailEvent() {
      const params = {
        project_id: this.projectId // 项目id
      };
      getProjectDetail(params)
        .then(res => {
          const resData = res.data;
          resData.send_time2 = this.formatDate(resData.send_time);
          resData.debug_time2 = this.formatDate(resData.debug_time);
          resData.acceptance_time2 = this.formatDate(resData.acceptance_time);
          resData.warranty_time2 = this.formatDate(resData.warranty_time);

          // 发货时间
          resData.send_time = resData.send_time * 1000;
          let sendTime = resData.send_time;
          // 调试时间
          resData.debug_time = resData.debug_time * 1000;
          let debugTime = resData.debug_time;
          // 验收时间
          resData.acceptance_time = resData.acceptance_time * 1000;
          let acceptanceTime = resData.acceptance_time;
          // 质保时间
          resData.warranty_time = resData.warranty_time * 1000;
          let warrantyTime = resData.warranty_time;
          // 判断 质保时间、验收时间、调试时间、发货时间
          // 当前时间
          let currentDateTime = new Date().getTime();
          // 已过保
          if (warrantyTime < currentDateTime) {
            resData.project_status = '已过保';
          } else {
            // 未过保
            // 有验收时间
            if (resData.acceptance_time) {
              // 已验收
              // 超过验收时间
              if (acceptanceTime < currentDateTime) {
                resData.project_status = '已验收';
              } else {
                // 未超过验收时间
                // 有调试时间
                if (resData.debug_time) {
                  // 超过调试时间
                  if (debugTime < currentDateTime) {
                    resData.project_status = '已交付';
                  } else {
                    // 未超过调试时间
                    // 有发货时间
                    if (resData.send_time) {
                      // 超过发货时间
                      if (sendTime < currentDateTime) {
                        resData.project_status = '试运行';
                      } else {
                        // 未超过发货时间
                        resData.project_status = '未知';
                      }
                    } else {
                      // 无发货时间
                      resData.project_status = '未知';
                    }
                  }
                } else {
                  // 无调试时间
                  // 有发货时间
                  if (resData.send_time) {
                    // 超过发货时间
                    if (sendTime < currentDateTime) {
                      resData.project_status = '试运行';
                    } else {
                      // 未超过发货时间
                      resData.project_status = '未知';
                    }
                  } else {
                    // 无发货时间
                    resData.project_status = '未知';
                  }
                }
              }
            } else {
              // 无验收时间
              // 有调试时间
              if (resData.debug_time) {
                // 超过调试时间
                if (debugTime < currentDateTime) {
                  resData.project_status = '已交付';
                } else {
                  // 未超过调试时间
                  // 有发货时间
                  if (resData.send_time) {
                    // 超过发货时间
                    if (sendTime < currentDateTime) {
                      resData.project_status = '试运行';
                    } else {
                      // 未超过发货时间
                      resData.project_status = '未知';
                    }
                  } else {
                    // 无发货时间
                    resData.project_status = '未知';
                  }
                }
              } else {
                // 无调试时间
                // 有发货时间
                if (resData.send_time) {
                  // 超过发货时间
                  if (sendTime < currentDateTime) {
                    resData.project_status = '试运行';
                  } else {
                    // 未超过发货时间
                    resData.project_status = '未知';
                  }
                } else {
                  // 无发货时间
                  resData.project_status = '未知';
                }
              }
            }
          }

          this.projectDetail = resData;
        })
        .then(res => {
          // 获取产线列表
          this.getProductLineListEvent();
        });
    },
    // 获取产线列表
    getProductLineListEvent() {
      const params = {
        project_id: this.projectId // 项目id
      };
      getProductLineList(params)
        .then(res => {
          this.proLineList = res.data.list;
          let proLineIdsArr = [];
          if (res.data.list && res.data.list.length) {
            res.data.list.map(item => {
              item.checked = false;
              proLineIdsArr.push(item.ID);
            });
          }
          if (proLineIdsArr.length) {
            this.proLineIds = proLineIdsArr.join(',');
          }
        })
        .then(() => {
          // 获取项目报警记录列表
          this.getAlarmNoticeListEvent();
        });
    },
    // 获取项目报警记录列表
    getAlarmNoticeListEvent() {
      const params = {
        start_time: this.startTime,
        end_time: this.endTiem,
        project_line_id: this.proLineIds, // 产线id
        type: this.policeType, // 报警类型
        level: this.policeLevel, // 报警等级
        status: this.policeStatus, // 处理进度
        search: this.searchOptions.searchKey // 输入设备编号查找
      };
      getAlarmNoticeList(params).then(res => {
        if (res.data.list && res.data.list.length) {
          res.data.list.map(item => {
            item.time = item.time.substr(0, 19).replace('T', ' ');
          });
          this.alarmNoticeList = res.data.list;
          this.noDataState = false;
        } else {
          this.alarmNoticeList = [];
          this.noDataState = true;
        }
      });
    },

    // 格式化日期
    formatDate(now) {
      let dt = new Date(now * 1000);
      let year = dt.getFullYear();
      let month = dt.getMonth() + 1;
      month = month < 10 ? '0' + month : month;
      let date = dt.getDate();
      date = date < 10 ? '0' + date : date;
      return `${year}-${month}-${date}`;
    },

    // 筛选
    handleFilter() {
      this.showWarnFilter = true;
    },

    // 报警详情
    jumpDetail(item) {
      const params = {
        id: item.id
      };
      getAlarmNoticeDetail(params).then(res => {
        if (this.$checkBtnPermission('maintenanceCenter:alarmNotice:list:detail')) {
          // 有工单时，跳转到工单详情，没有时跳转到报警详情
          if (res.data.status === 1 || res.data.status === 2 || res.data.status === 6) {
            // 报警详情
            this.$router.push({
              name: 'alarmNotificationDetail',
              query: {
                id: res.data.id,
                from: 'other'
              }
            });
          } else {
            // 工单详情
            this.$router.push({
              name: 'alarmWorkDetail',
              query: {
                id: res.data.orderId
              }
            });
          }
        } else {
          this.$toast(this.$store.state.noDetailPermissionText);
        }
      });
    },

    // 筛选组件的确定按钮
    submitFilter(params) {
      if (params.project_line_id) this.proLineIds = params.project_line_id;
      this.policeType = params.type;
      this.policeLevel = params.level;
      this.policeStatus = params.status;
      this.startTime = params.startTime;
      this.endTiem = params.endTiem;
      this.getAlarmNoticeListEvent();
      this.showWarnFilter = false;
    }
  },
  filters: {
    // 处理等级
    handleLevel(num) {
      let levelText = '';
      switch (num) {
        case 0:
          levelText = '未知';
          break;
        case 1:
          levelText = '一级';
          break;
        case 2:
          levelText = '二级';
          break;
        case 3:
          levelText = '三级';
          break;
        case 4:
          levelText = '四级';
          break;
        case 5:
          levelText = '五级';
          break;
      }
      return levelText;
    },
    // 处理进度
    handleStatus(num) {
      let statusText = '';
      switch (num) {
        case 1:
          statusText = '待确认';
          break;
        case 2:
          statusText = '待处理';
          break;
        case 3:
          statusText = '处理中';
          break;
        case 4:
          statusText = '延时处理';
          break;
        case 5:
          statusText = '已完成';
          break;
        case 6:
          statusText = '恢复';
          break;
        case 7:
          statusText = '已忽略';
          break;
      }
      return statusText;
    }
  }
};
</script>

<style lang="scss" scoped>
.warning-notice-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  // 搜索框区域
  .search-wrap {
    background-color: #ffffff;
    .search-input-box {
      height: 1.6rem;
      padding-right: 0.16rem;
      .van-search {
        height: 100%;
      }
      .filter-box {
        color: #666666;
      }
    }
  }

  // 内容列表区域
  .content-list-wrap {
    flex: 1;
    height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 0.213333rem;
    .content-item-box {
      display: flex;
      align-items: center;
      height: 3.333333rem;
      background-color: #ffffff;
      margin-bottom: 0.213333rem;
      padding: 0.293333rem 0.4rem;
      .item-left-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        .icon-box {
          display: flex;
          justify-content: center;
          width: 1.12rem;
          height: 1.12rem;
          line-height: 1.12rem;
          border-radius: 50%;
          background-color: #fef0f0;
          i {
            color: #f56c6c;
            font-size: 0.533333rem;
          }
        }
        // 恢复样式
        .icon-box6 {
          background-color: #f0f9eb;
          i {
            color: #67c23a;
          }
        }
      }
      .line-box {
        width: 1px;
        height: 1.973333rem;
        background-color: #f2f6fc;
        margin: 0 0.293333rem;
      }
      .item-right-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding: 0.08rem 0;
        .project-name {
          display: flex;
          justify-content: space-between;
          color: #333333;
          font-size: 0.4rem;
          .status-box {
            display: flex;
            align-items: center;
            color: #666666;
            font-size: 0.32rem;
            // 待确认样式
            .icon-box-status1 {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 0.48rem;
              height: 0.48rem;
              background-color: #a788ff;
              border-radius: 50%;
              margin-right: 0.08rem;
              i {
                color: #ffffff;
                font-size: 0.266667rem;
              }
            }
            // 待处理样式
            .icon-box-status2 {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 0.48rem;
              height: 0.48rem;
              background-color: #ffc329;
              border-radius: 50%;
              margin-right: 0.08rem;
              i {
                color: #ffffff;
                font-size: 0.266667rem;
              }
            }
            // 处理中样式
            .icon-box-status3 {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 0.48rem;
              height: 0.48rem;
              background-color: #76b6ff;
              border-radius: 50%;
              margin-right: 0.08rem;
              i {
                color: #ffffff;
                font-size: 0.266667rem;
              }
            }
            // 已完成样式
            .icon-box-status5 {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 0.48rem;
              height: 0.48rem;
              background-color: #81e4a9;
              border-radius: 50%;
              margin-right: 0.08rem;
              i {
                color: #ffffff;
                font-size: 0.266667rem;
              }
            }
            // 恢复样式
            .span-status6 {
              color: #67c23a;
            }
          }
        }
        .middle-box {
          display: flex;
          justify-content: space-between;
          .fault-name {
            display: flex;
            flex-direction: column;
            color: #666666;
            font-size: 0.32rem;
            .fault-val {
              font-size: 0.346667rem;
              margin-top: 0.266667rem;
            }
          }
        }
        .company-name {
          display: flex;
          justify-content: space-between;
          color: #999999;
          font-size: 0.346667rem;
          .warning-grade {
            border: 1px solid #85aeff;
            padding: 0.053333rem;
            border-radius: 0.08rem;
            color: #2454b3;
            font-size: 0.266667rem;
          }
        }
      }
    }
  }
}
</style>
